<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Connect Web Server - Form Builder</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" >

<!-- Framework CSS -->

<link rel="stylesheet" href="static/css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="static/css/blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="static/css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

<!-- Import fancy-type plugin for the sample page. -->
<link rel="stylesheet" href="static/css/blueprint/fancytype.css" type="text/css" media="screen, projection">

<!--- Code view/edit --->

<script src="../static/js/codemirror/codemirror.js"></script>
<link rel="stylesheet" href="../static/css/codemirror/codemirror.css">
<script src="../static/js/codemirror/mode/htmlmixed.js"></script>
<script src="../static/js/codemirror/mode/css.js"></script>
<script src="../static/js/codemirror/mode/javascript.js"></script>
<script src="../static/js/codemirror/mode/xml.js"></script>
<style>
.CodeMirror {
	background: #f5f5f5;
	border:1px solid gray;
	
	font-size:12px;
}
.CodeMirror-scroll {
	overflow-y: auto;
	overflow-x: auto;
	height: 600px;
	width:100%;
}
.CodeMirror-activeline-background {
	background: #e8f2ff !important;
}
h1 {
	font-weight:normal;
	font-size:2em;
	line-height:1;
	margin-bottom:0.5em;
}
</style>

<!-- Custom styles to override framework -->

<link rel="stylesheet" href="static/css/FormBuilder.css" type="text/css" media="screen, projection">
<script src="static/js/jquery/jquery-1.9.1.js"></script>
<script src="static/js/jquery/jquery-ui.js"></script>
<script src="static/js/jquery/jquery.ui.touch-punch.js"></script>
<script type="text/javascript" src="static/js/iris.js"></script>
<script src="static/js/FormBuilder.js"></script>
</head>
<body>
<Script>
$( document ).ready(function() {
setup();
});



</Script>
<div class="container"> <br/>
  <h1><a href="/"><img src="static/images/ConnectLogo.png"  alt="Connect" style="vertical-align:middle;" ></a> Connect Web Server</h1>
  <hr>
  <!-- Form builder section -->
  
  <h3>Form Designer</h3>
  <div id="form_window">
    <ul id="tabs">
      <li><a href="#view_form">Form View</a></li>
      <li><a href="#view_html">HTML View</a></li>
    </ul>
   <br/>
    
    <!-- Designer on the left -->
    <div id="view_form" >
      <div class="span-15 " style="padding-right:4px;"> <!--left-->
      
        <div id="form_element_controls"  class="hide">
	        <!-- NOTE: THE "form_element_controls" IS PART OF THE FORM DESIGNER UI - DO NOT DELETE !! -->
	        <img id="delete" src="static/images/FormBuilder/page_white_delete.png" alt="Delete">
        </div>
        <div id="formContainer">
        <form id="form_designer" action="">
          <ul id="form_elements">
            <li id="form_header"  style="display: block; ">
              <h2 id="form_name">Untitled Form</h2>
            </li>
            <li id="f000" >
              <p>Drag you fields onto here to build your form. The header, and footer are fixed elements,
                but feel free to customize the HTML to meet your requirements !</p>
            </li>
            <li id="form_footer">
              <p>Make sure you have filled in all required fields.</p>
              <div>
                <button> <img src="static/images/FormBuilder/arrow-transition.png" alt=""> Submit Form</button>
              </div>
              <br>
            </li>
          </ul>
        </form>
        </div>
        <br/>
        <div id="div_button" class="buttons ">
          <button id="save_design_button"> <img src="static/images/FormBuilder/disk-black.png" alt=""> Save Design</button>
        </div>
      </div>
      <!-- left --> 
      <!-- Pallette on the right -->
      <div class="span-8 last " >
           <div id="tab_palette">
            <div id="palette">
            <h3>Simple Fields</h3>
            <div>
              <ul>
                <li><img src="static/images/FormBuilder/ui-text-field.png">Text Field
                  <div class="fieldContent">
                    <label class="desc" >Text Field</label>
                    <div>
                      <input readonly class="input-text" type="text">
                    </div>
                  </div>
                </li>
                <li><img src="static/images/FormBuilder/ui-text-field-password.png">Password
                  <div class="fieldContent">
                    <label class="desc" >Password</label>
                    <div>
                      <input readonly class="input-password" type="password">
                    </div>
                  </div>
                </li>
                <li><img src="static/images/FormBuilder/ui-text-area.png">Text Area
                  <div class="fieldContent">
                    <label class="desc" >Text Area</label>
                    <div>
                      <textarea  readonly class="input-textarea" rows="5" cols=""></textarea>
                    </div>
                  </div>
                </li>
                <li><img src="static/images/FormBuilder/ui-text-field-format.png">Number Field
                  <div class="fieldContent">
                    <label class="desc" >Number Field</label>
                    <div>
                      <input readonly class="input-number" type="text" value="#">
                    </div>
                  </div>
                </li>
                <li><img src="static/images/FormBuilder/ui-check-box.png">Checkboxes
                  <div class="fieldContent">
                    <label class="desc" >Checkboxes</label>
                    <div >
                      <input class="checkbox" type="checkbox">
                      <label class="choice">First option</label>
                      <input class="checkbox" type="checkbox">
                      <label class="choice">Second option</label>
                      <input class="checkbox" type="checkbox">
                      <label class="choice">Third option</label>
                    </div>
                  </div>
                </li>
                <li><img src="static/images/FormBuilder/ui-combo-box.png">Dropdown List
                  <div class="fieldContent">
                    <label class="desc" >Dropdown List </label>
                    <div>
                      <select >
                        <option selected>-Default-</option>
                        <option>First option</option>
                        <option>Second option</option>
                        <option>Third option</option>
                      </select>
                    </div>
                  </div>
                </li>
                <li><img src="static/images/FormBuilder/ui-radio-button.png">Radio Buttons
                  <div class="fieldContent">
                    <label class="desc" >Radio button group.</label>
                    <div >
                      <input class="radio" name="radiogroup" type="radio">
                      <label class="choice">First option</label>
                      <input class="radio" name="radiogroup" type="radio">
                      <label class="choice">Second option</label>
                      <input class="radio" name="radiogroup" type="radio">
                      <label class="choice">Third option</label>
                    </div>
                  </div>
                </li>
                <li><img src="static/images/FormBuilder/ui-separator.png">Section Break
                  <div class="fieldContent">
                    <hr/>
                  </div>
                </li>
                <li><img src="static/images/FormBuilder/ui-label.png">Text Block
                  <div class="fieldContent">
                    <p>Enter you text here </p>
                  </div>
                </li>
              </ul>
            </div>
            <h3>Advanced Fields</h3>
            <ul>
             <li><img src="static/images/FormBuilder/image.png">Image
                <div class="fieldContent">
                 <label class="desc" >An Image ...</label>
                   <div> <img src="static/images/FormBuilder/image32.png" >
                  </div>
                </div>
              </li>
              <li><img src="static/images/FormBuilder/ui-color-picker.png">Color Selector
                <div class="fieldContent">
                  <label class="desc" >Color:</label>
                  <div> <img src="static/images/FormBuilder/ui-color-picker.png" >
                    <input type="text" class='color-picker' value="#bada55"  onClick="colorPickerClick(this);" >
                  </div>
                </div>
              </li>
              <li><img src="static/images/FormBuilder/user.png">Name
                <div class="fieldContent">
                  <label class="desc" >Name</label>
                  <div style="clear:both;">
                    <div style="float:left">
                      <input readonly  type="text" class="first-name">
                      <br/>
                      <label class="smallText">First Name</label>
                    </div>
                    <div style="float:left">
                      <input readonly  type="text" class="middle-name">
                      <br/>
                      <label class="smallText">Middle</label>
                    </div>
                    <div >
                      <input readonly  type="text" class="last-name" >
                      <br/>
                      <label class="smallText">Last Name</label>
                    </div>
                  </div>
                </div>
              </li>
              <li><img src="static/images/FormBuilder/time.png">Time
                <div class="fieldContent">
                  <label class="desc" >Time</label>
                  <div style="clear:both;">
                    <div style="float:left">
                      <input readonly  type="text" class="time-hours">
                      : <br/>
                      <label class="smallText">Hour</label>
                    </div>
                    <div style="float:left">
                      <input readonly  type="text" class="time-minutes">
                      : <br/>
                      <label class="smallText">Minutes</label>
                    </div>
                    <div>
                      <input readonly  type="text" class="time-seconds" >
                      <br/>
                      <label class="smallText">Seconds</label>
                    </div>
                  </div>
                </div>
              </li>
              <li><img src="static/images/FormBuilder/money.png">Amount
                <div class="fieldContent">
                  <label class="desc" >Amount</label>
                  <div style="clear:both;">
                    <div style="float:left"> $
                      <input readonly  type="text" class="money-dollars">
                      . <br/>
                      <label class="smallText">Dollars</label>
                    </div>
                    <div >
                      <input readonly  type="text" class="money-cents">
                      <br/>
                      <label class="smallText">cents</label>
                    </div>
                  </div>
                </div>
              </li>
              <li><img src="static/images/FormBuilder/calendar.png">Date
                <div class="fieldContent">
                  <label class="desc" >Date</label>
                  <div style="clear:both;">
                    <div style="float:left">
                      <input readonly class="text" size="2" type="text">
                      / <br/>
                      <label class="smallText">Day</label>
                    </div>
                    <div style="float:left">
                      <input readonly class="text" size="2" type="text">
                      / <br/>
                      <label class="smallText">Month</label>
                    </div>
                    <div >
                      <input readonly class="text" size="4" type="text">
                      <img src="static/images/FormBuilder/calendar.png" alt="Pick Date." class="icon"> <br/>
                      <label class="smallText">Year</label>
                    </div>
                  </div>
                </div>
              </li>
              <li><img src="static/images/FormBuilder/home.png">Address
                <div class="fieldContent">
                  <label class="desc" >Address</label>
                  <div>
                    <p >
                      <input readonly  type="text" class="fullWidth">
                      <br/>
                      <label class="smallText">Street Address</label>
                    </p>
                    <p>
                      <input readonly  type="text" class="fullWidth">
                      <br/>
                      <label class="smallText">Address Line 2</label>
                    </p>
                    <p class="right">
                      <input readonly type="text" >
                      <br/>
                      <label class="smallText">State / Province / Region</label>
                    </p>
                    <p >
                      <input readonly  type="text" class="halfWidth">
                      <br/>
                      <label class="smallText">City</label>
                    </p>
                    <p class="right">
                      <input readonly  type="text" class="halfWidth">
                      <br/>
                      <label class="smallText">Country</label>
                    </p>
                    <p >
                      <input readonly  type="text" class="halfWidth">
                      <br/>
                      <label class="smallText">Zip / Postal Code</label>
                    </p>
                  </div>
                </div>
              </li>
              <li><img src="static/images/FormBuilder/telephone.png">Phone
                <div class="fieldContent">
                  <label class="desc" >Phone Number</label>
                  <div style="clear:both;">
                    <div style="float:left">
                      <input readonly  type="text" >
                      - <br/>
                      <label class="smallText">###</label>
                    </div>
                    <div style="float:left">
                      <input readonly  type="text" >
                      - <br/>
                      <label class="smallText">###</label>
                    </div>
                    <div >
                      <input readonly  type="text" >
                      <br/>
                      <label class="smallText">###</label>
                    </div>
                  </div>
                </div>
              </li>
              <li><img src="static/images/FormBuilder/world_link.png">Website
                <div class="fieldContent">
                  <label class="desc" >Web Site</label>
                  <div>
                    <input value="http://" readonly   class="input-email" type="text">
                  </div>
                </div>
              </li>
              <li><img src="static/images/FormBuilder/email.png">Email
                <div class="fieldContent">
                  <label class="desc" >Email</label>
                  <div>
                    <input value="mailto://" readonly class="input-email" type="text">
                  </div>
                </div>
              </li>
              <li><img src="static/images/FormBuilder/folder_page.png">File Upload
                <div class="fieldContent">
                  <label class="desc" >Upload a File</label>
                  <div>
                    <input class="text" readonly type="file">
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- ############## End of palette tab ################# --> 
        
        <br>
        <br>
        <div id="toolbox">
          <ul id="tabs">
            <li><a href="#tab_fieldProperties">Field Properties</a></li>
            <li><a href="#tab_formProperties">Form Properties</a></li>
          </ul>
          <div id="tab_fieldProperties" >
          	<p class="smallText ">Properties of the selected field.</p><br>
            <div class="propertyTable">
              <div class="row"><span class="name">ID:</span><span class="value">
                <input id="fieldPropertyID" type=text style="background-color:#f9f9f9" readonly>
                </span></div>
              <div class="row"><span class="name">Name:</span><span class="value">
                <input id="fieldPropertyName" type=text value="">
                </span></div>
              <div class="row"><span class="name">Label:</span><span class="value">
                <input id="fieldPropertyLabel" type=text value="">
                </span></div>
              <div class="row"><span class="name">Class:</span><span class="value">
                <input id="fieldPropertyClass" type=text value="">
                </span></div>
              <div class="row"><span class="name">Required:</span><span class="value">
                <input id="fieldPropertyRequired" type="checkbox" >
                </span></div>
              <div class="row"><span class="name">onChange:</span><span class="value">
                <input id="fieldPropertyOnChange" type=text value="">
                </span></div>
              <div class="row"><span class="name">onClick:</span><span class="value">
                <input id="fieldPropertyOnClick" type=text value="">
                </span></div>
              <div class="row" style="text-align:center">
                <button onClick="updateFieldProperties()"><img src="static/images/FormBuilder/arrow-circle.png" alt="">Update</button>
              </div>
            </div>
            <!-- Table --> 
          </div>
          <!-- ############## End of Field Properties tab ################# -->
          
          <div id="tab_formProperties" >
          <p class="smallText ">Form wide properties.</p><br>
            <div class="propertyTable">
              <div class="row"><span class="name">ID:</span><span class="value">
                <input id="formPropertyID" type=text  style="background-color:#f9f9f9" readonly>
                </span></div>
              <div class="row"><span class="name">Name:</span><span class="value">
                <input id="formPropertyName" type=text value="">
                </span></div>
              <div class="row"><span class="name">Action:</span><span class="value">
                <input id="formPropertyAction" type=text value="">
                </span></div>
              <div class="row"><span class="name">Method:</span><span class="value">
               	<input id="formPropertyMethod" type=text value="">
                </span></div>
              <div class="row"><span class="name">Class:</span><span class="value">
                <input id="formPropertyClass" type=text value="">
                </span></div>
              <div class="row" style="text-align:center">
                <button onClick="updateFormProperties()"> <img src="static/images/FormBuilder/arrow-circle.png" alt="">Update</button>
              </div>
            </div>
            <!-- Table --> 
          </div>
          <!-- ############## End of Form Properties tab ################# --> 
          
        </div>
        <!-- End toolbox --> 
      </div>
    </div>
    <!-- view_form -->
    
    <div id="view_html"> 
      <!-- Code Mirror editor here --> 
      <div id="div_button" class="buttons ">
     	  <button id="refreshHTML" > <img src="static/images/FormBuilder/arrow-circle-double.png" alt="">Refresh</button>
          <button id="updateHTML" > <img src="static/images/FormBuilder/arrow-turn-090.png" alt="">Update Design</button>
        </div>
    </div>
  </div>
  <!-- Form window --> 
  
</div>
<!-- container -->
<hr>
 <div class="last quiet right"> 
          <a href="http://www.binarycube.com"><img src="static/images/logo-bw.png" width="150" /></a><br/>
      </div>
</body>
</html>